
import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, Divider, Table, Space, Tag, notification } from 'antd';
import HeartRateEcharts from './HeartRateEcharts';
import type { ColumnsType } from 'antd/es/table';
import { useForm } from 'antd/es/form/Form';
import type { DatePickerProps } from 'antd';
import { DatePicker } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import Index from '../../../../../../api/Inedx';

import moment from 'moment';
interface Props { }


interface DataType {
    key: number;
    hrId: number;
    hrTime: string;
    hrValue: number;
    datasorigin: string;
    residentId: number;
}











function HeartRate(props: Props) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [hrId, sethrId] = useState("")
    const [form] = useForm()
    const dispatch = useDispatch()
    const HeartRateList = useSelector((state: any) => { return state.WTreducer.HeartRateList })
    const residentId = useSelector((state: any) => { return state.WTreducer.residentId })

    let getHeartRateList = async () => {//查询用户心率列表
        let res = await Index.Resident.GetHeartRateList({ residentId: residentId })
        console.log(res);
        if (res.data.code === "200") {
            res.data.data.map((item: any) => {
                item.key = item.hrId
                item.datasorigin = "用户记录"
            })
            dispatch({ type: "SAVE_HEARTRATELIST", payload: res.data.data })
        } else {
            dispatch({ type: "SAVE_HEARTRATELIST", payload: res.data.data })
        }
    }

    const set = async (row: any) => {
        setIsModalOpen(true);
        form.setFieldValue("hrValue", row.hrValue)
        sethrId(row.hrId)
    }
    const onFinish = async (value: any) => {
        console.log(value);
        value.hrTime = moment(value.hrTime._d).format("YYYY-MM-DD HH:mm:ss")//处理时间格式
        let res = await Index.Resident.SetHeartRate({ residentId, hrId, ...value })//发请求
        console.log(res);
        if (res.data.code === "200") {
            getHeartRateList()//请求成功调获取接口,刷新表格
            setIsModalOpen(false);//关闭对话框
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "修改失败!" })
        }
    }

    const deletes = async (hrId: any, residentId: any) => {
        let res = await Index.Resident.DeleteHeartRate({ residentId, hrId })
        console.log(res);
        if (res.data.code === "200") {
            getHeartRateList()
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "删除失败!" })
        }
    }











    const columns: ColumnsType<DataType> = [
        {
            title: '测量时间',
            dataIndex: 'hrTime',
            key: 'hrTime',
        },
        {
            title: '数值(bmp)',
            dataIndex: 'hrValue',
            key: 'hrValue',
        },
        {
            title: '评估',
            key: 'test',
            render: (_, record: any) => {
                if (record.hrValue < 60) {
                    return (<Tag color="gold">低</Tag>)
                } else if (record.hrValue >= 60 && record.hrValue <= 100) {
                    return (<Tag color="green">正常</Tag>)
                } else {
                    return (<Tag color="error">高</Tag>)
                }
            }
        },
        {
            title: '数据来源',
            key: 'datasorigin',
            dataIndex: 'datasorigin',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { set(record) }}>编辑</a>
                    <a onClick={() => { deletes(record.hrId, record.residentId) }}>删除</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = HeartRateList

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };




    return (
        <div className="card">
            <div className='left'>
                <HeartRateEcharts></HeartRateEcharts>
            </div>
            <Divider type='vertical'></Divider>
            <div className='right'>
            <span className='title32'>心率记录</span>
                <Table columns={columns} dataSource={data} scroll={{ y: 400, x: 0 }} />
            </div>
            <Modal title="编辑" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={false}>
                <Form layout="vertical" onFinish={(value) => { onFinish(value) }} form={form}>
                    <Form.Item
                        label="测量时间"
                        name="hrTime"
                        rules={[{ required: true, message: '请输入时间' }]}
                    >
                        <DatePicker onChange={onChange} placeholder="请输入日期" />
                    </Form.Item>
                    <Form.Item
                        label="数值"
                        name="hrValue"
                        rules={[{ required: true, message: '请输入数值' }]}
                    >
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>保存</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>

    );
}

export default HeartRate;